<template>
  <LayoutView :tab-index="999" :height-fill="!book.imageList.length">
    <template #content>
      <div class="group">
        <div class="book-info">
          <div class="banner" v-if="book.imageList.length>0">
            <el-carousel height="450px" trigger="click">
              <el-carousel-item v-for="image in book.imageList" :key="image.id">
                <el-image style="width: 100%; height: 100%" fit="fill" :src="baseImage+image.imageSrc"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <el-row class="row">
            <el-col :span="16">
              <h2 class="title" :title="book.bookName">{{book.bookName}}</h2>
            </el-col>
            <el-col :span="1" :offset="6">
              <i class="book-icon" :class="isLike?'el-icon-star-on':'el-icon-star-off'" :title="isLike?'取消收藏':'点击收藏'" @click="saveLike"></i>
            </el-col>
            <el-col :span="1">
              <i class="book-icon el-icon-reading" @click="openRead()" title="点击阅读图书"></i>
            </el-col>
          </el-row>
          <el-row class="row">
            <el-col :span="12">
              <span>作者：</span>
              <span style="font-size: 18px;font-weight: bold">{{book.authorName || book.author.nickname}}</span>
            </el-col>
            <el-col :span="2" :offset="10">
              <el-tag type="warning" v-if="book.bookStatus === 1">连载中</el-tag>
              <el-tag v-else type="success">已完结</el-tag>
            </el-col>
          </el-row>
          <el-row class="row" :gutter="20">
            <el-col :span="2" v-for="category in book.categoryList" :key="category.categoryId">
              <el-tag type="primary">{{category.categoryName}}</el-tag>
            </el-col>
          </el-row>
        </div>
        <div class="book-profile">
          <el-divider content-position="center">图书简介</el-divider>
          <p>{{book.profile}}</p>
        </div>
        <div class="book-catalog">
          <el-divider content-position="center">图书目录</el-divider>
          <catalog-page :book-id="book.bookId" @catalogClick="openRead"/>
        </div>
        <div class="book-comment">
          <el-divider content-position="center">图书评论</el-divider>
          <el-row style="margin-bottom: 15px;padding: 0 15px" type="flex" align="middle">
            <el-col :span="2">评论({{commentTotal}})条</el-col>
            <el-col :span="3">评分({{bookScore}})分</el-col>
            <el-col :span="2">
              <el-button @click="showComment" type="text">发表评论<i class="el-icon-arrow-right"></i></el-button>
            </el-col>
          </el-row>
          <comment-page @commentTotal="getCommentTotal" :book-id="book.bookId" :login-id="loginId" type="book" ref="commentPage"/>
        </div>
      </div>
      <el-dialog title="发表评论" :visible.sync="showCommentDialog" v-if="showCommentDialog">
        <el-form :model="comment" :rules="rules" ref="commentForm">
          <el-descriptions border :column="1">
            <el-descriptions-item label="评分">
              <el-form-item>
              <el-rate show-text v-model="comment.score"/>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="内容">
              <el-form-item prop="content">
                <el-input type="textarea" maxlength="150" show-word-limit v-model="comment.content" :rows="3"></el-input>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="saveComment">提交</el-button>
          <el-button type="warning" @click="showCommentDialog = false">取消</el-button>
        </template>
      </el-dialog>
    </template>
  </LayoutView>
</template>
<script>
import LayoutView from '@/components/LayoutView.vue'
import CatalogPage from '@/components/CatalogPage.vue'
import CommentPage from '@/components/CommentPage.vue'
export default {
  name: 'BookDetail',
  components: { LayoutView, CatalogPage, CommentPage },
  data () {
    return {
      book: {},
      baseImage: process.env.VUE_APP_URL,
      catalogList: [],
      commentList: [],
      isLike: false,
      isLogin: false,
      commentTotal: 0,
      loginId: '',
      comment: {
        content: '',
        score: 5
      },
      showCommentDialog: false,
      rules: {
        content: [{
          required: true,
          message: '请输入评论内容'
        }]
      }
    }
  },
  computed: {
    bookScore () {
      if (this.book.scoreCount === 0) {
        return 0
      }
      return (this.book.score / this.book.scoreCount).toFixed(2)
    }
  },
  methods: {
    getBookInfo () {
      this.$http.get(`api/v1/book/info/${this.book.bookId}`).then(data => {
        if (data) {
          this.book = { ...data }
          this.$http.get('api/vip/like/check', { bookId: this.book.bookId }).then(data => {
            this.isLike = data
          }).catch(() => {})
        } else {
          this.$message.error('图书编号异常！')
          this.$router.replace('/')
        }
      }).catch(() => {})
    },
    getLoginInfo () {
      this.$http.get('api/vip/info').then(data => {
        if (data) {
          this.isLogin = true
          this.loginId = data.vipId
        }
      }).catch(() => {})
    },
    showComment () {
      if (!this.isLogin) {
        this.$message.error('请先登录！')
        return false
      }
      this.comment = {
        score: 5,
        content: ''
      }
      this.showCommentDialog = true
    },
    saveComment () {
      this.$refs.commentForm.validate(valid => {
        if (valid) {
          this.comment.bookId = this.book.bookId
          this.$http.post('api/vip/comment/save', this.comment).then(() => {
            this.$message.success('评论成功！')
            this.showCommentDialog = false
            this.getBookInfo()
            this.$refs.commentPage.getCommentList()
          })
        }
      })
    },
    getCommentTotal (val) {
      this.commentTotal = val
    },
    saveLike () {
      if (this.isLogin) {
        this.$http.post('api/vip/like/save', { bookId: this.book.bookId }).then(() => {
          this.getBookInfo()
        }).catch(() => {})
      } else {
        this.$message.error('请先登录！')
      }
    },
    openRead (catalogId) {
      if (catalogId) {
        this.$router.push('/book/catalog/' + catalogId)
      } else {
        this.$http.get(`api/vip/catalog/book/${this.book.bookId}`).then(data => {
          this.$router.push('/book/catalog/' + data.catalogId)
        }).catch(() => {})
      }
    }
  },
  created () {
    this.book.bookId = this.$route.params.bookId
    this.getLoginInfo()
    this.getBookInfo()
  }
}
</script>

<style scoped>
.group{
  width: 980px;
  margin: 0 auto;
  background-color: whitesmoke;
  .book-info{
    .row{
      margin-top: 15px;
      padding: 0 15px;
      .title{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        &:hover{
          color: #42b983;
        }
      }
      .book-icon{
        font-size: 22px;
        cursor: pointer;
      }
    }
  }
  .book-profile{
    padding: 15px;
  }
  .book-catalog {
    padding: 15px;
  }
}
</style>
